/* eslint-disable no-unused-vars */
<template>
  <div class='container'>
    <el-dialog
      :title="title"
      :visible.sync="value"
      width="400px"
      :before-close="handleClose">
      <div>
        <el-form label-width="80px" :rules="rules" :model="form" ref="form">
          <el-form-item label="学科名称" prop="name">
            <el-input v-model="form.name" size="small" ></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch
              v-model="form.valSwitch"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hDown">取 消</el-button>
        <el-button type="primary" @click="hSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail, update, add } from '@/api/hmmm/subjects.js'
export default {
  name: 'sub-add',
  props: {
    value: {
      type: Boolean,
      default: null
    },
    subId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      form: {
        name: '',
        valSwitch: true
      },
      title: '',
      rules: {
        name: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    if (this.subId) {
      this.title = '编辑学科'
      this.upDate()
    } else {
      this.title = '新增学科'
    }
  },
  methods: {
    buildParams () {
      const data = {}
      data.id = this.subId
      data.subjectName = this.form.name
      data.isFrontDisplay = !!this.form.valSwitch
      return data
    },
    async upDate () {
      const data = this.buildParams()
      if (!this.subId) return
      try {
        const res = await detail(data)
        this.form.name = res.data.subjectName
        this.form.valSwitch = !!res.data.isFrontDisplay
      } catch (error) {
        console.log(error)
      }
    },
    async hEditRequest (data) {
      await update(data)
      this.emit()
      this.$emit('input', !this.value)
      this.$message.success('编辑成功')
    },
    hEdit () {
      const data = this.buildParams()
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.hEditRequest(data)
        } else {
          this.$message.error('编辑失败,必须填写学科名称')
          return false
        }
      })
    },
    handleClose () {
      this.$emit('input', !this.value)
    },
    // 使用父组件方法
    emit () {
      this.$listeners.init && this.$emit('init')
    },
    // 新增学科
    async hAddRequest () {
      const params = {
        subjectName: this.form.name,
        isFrontDisplay: this.form.valSwitch
      }
      try {
        await add(params).then(() => {
          this.$message.success('添加成功')
          this.$emit('input', !this.value)
          this.emit()
        })
      } catch (error) {
        this.$message.error('添加失败' + error)
      }
    },
    hAddSub () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.hAddRequest()
        } else {
          this.$message.error('添加失败,必须填写学科名称')
          return false
        }
      })
    },
    // 点击确定按钮
    hSure () {
      this.subId ? this.hEdit() : this.hAddSub()
    },
    hDown () {
      this.$emit('input', !this.value)
    }
  }
}
</script>

<style scoped lang='less'></style>
